<template>
  <div class="profile">
    <headerTop title="我的"></headerTop>
    <div class="profile-number">
      <router-link to="/login" class="profile-link clearfix">
        <div class="profile_image">
          <i class="iconfont icon-geren"></i>
        </div>
        <div class="user-info">
          <p class="user-info-top">登录/注册</p>
          <p class="user-info-bottom">
            <i class="iconfont icon-icon">暂无绑定手机号</i>
          </p>
        </div>
        <i class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"></i>
      </router-link>
    </div>
    <div class="profile-money">
      <a href="javascript:" class="money-item">
        <span class="item-fir">0.00</span>元
        <p>我的余额</p>
      </a>
      <a href="javascript:" class="money-item">
        <span class="item-sec">0</span>个
        <p>我的优惠</p>
      </a>
      <a href="javascript:" class="money-item item-border">
        <span class="item-thi">0</span>分
        <p>我的积分</p>
      </a>
    </div>
    <div class="profile-list">
      <div class="list-container">
        <i class="iconfont icon-dingdan"></i>
        <p>
          我的订单
          <i class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"></i>
        </p>
      </div>
      <div class="list-container">
        <i class="iconfont icon-bonus-line"></i>
        <p>
          积分商城
          <i class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"></i>
        </p>
      </div>
      <div class="list-container">
        <i class="iconfont icon--huiyuanqiaguanli"></i>
        <p>
          外卖会员卡
          <i class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"></i>
        </p>
      </div>
      <div class="list-container">
        <i class="iconfont icon-fuwuzhongxin"></i>
        <p>
          服务中心
          <i class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"></i>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import HeaderTop from '../../components/HeaderTop'
export default {
  components: {
    HeaderTop
  }
}
</script>
<style lang="scss">
.profile {
  width: 100%;
  .profile-number {
    border-top: 1px solid transparent;
    .profile-link {
      position: relative;
      display: block;
      background-color: #02a774;
      padding: 20px 10px;
      color: #fff;
      .profile_image {
        float: left;
        width: 60px;
        height: 60px;
        .iconfont {
          font-size: 45px;
        }
      }
      .user-info {
        line-height: 25px;
        float: left;
      }
      .icon-changyongtubiao-xianxingdaochu-zhuanqu- {
        position: absolute;
        top: 40px;
        right: 20px;
      }
    }
  }
  .profile-money {
    display: flex;
    border-bottom: 1px solid #4e4e4e;
    .money-item {
      margin-top: 10px;
      margin-bottom: 10px;
      color: #000;
      flex: 1;
      text-align: center;
      border-right: 1px solid #4e4e4e;
      line-height: 25px;
      span {
        font-size: 25px;
        font-weight: bold;
      }
      .item-fir {
        color: orange;
      }
      .item-sec {
        color: red;
      }
      .item-thi {
        color: green;
      }
    }
    .item-border {
      border: none;
    }
  }
  .list-container {
    margin-left: 10px;
    height: 50px;
    line-height: 50px;
    p {
      display: inline-block;
      margin-left: 10px;
      width: 335px;
      border-bottom: 1px solid #5e5e5e;
    }
    .icon-dingdan {
      color: green;
      font-size: 20px;
    }
    .icon-bonus-line {
      color: red;
      font-size: 20px;
    }
    .icon--huiyuanqiaguanli {
      color: orange;
      font-size: 20px;
    }
    .icon-fuwuzhongxin {
      color: green;
      font-size: 20px;
    }
    .icon-changyongtubiao-xianxingdaochu-zhuanqu- {
      float: right;
      margin-right: 10px;
    }
  }
}
</style>
